<template>
	<view>
		<image style="position: fixed;width: 100%;height: 100%;" :src="require('../../static/other/beijingtus.png')" mode=""></image>
		<view class="conatiner-app" style="position: relative;">
	<!-- 	<view class="applogo">
			<image src="../../static/BasicsBg.png" mode=""></image>
		</view> -->
	
			<view class="app-content">
				<view class="top">养老机构智慧健康养老云</view>
				<view class="bottom">移动照护2.0</view>
			</view>
			<view class="form">
				<view class="form-inner">
					<view class="form-item">
						<view class="left">
							<image class="img" src="../../static/img/u29.png" mode=""></image>
						</view>
						<view class="center" :class="[phoneline ? 'line' : '']">
							<input style="letter-spacing:3rpx;" v-model="form.username" @focus="focus('phone')" @blur="blur('phone')" type="text" placeholder-class="place"
							 placeholder="请输入手机号" />
						</view>
						<!-- <view class="right">
							<image class="image" src="../../static/img/u33.png" mode=""></image>
						</view> -->
					</view>
					<view class="form-item">
						<view class="left">
							<image class="img" src="../../static/img/u30.png" mode=""></image>
						</view>
						<view class="center" :class="[passwordline ? 'line' : '']">
							<input style="letter-spacing:3rpx;" v-model="form.password" @focus="focus('passwordline')" @blur="blur('passwordline')" placeholder-class="place"
							 type="password" placeholder="请输入密码" />
						</view>
						<!-- <view class="right">
							<image class="image" src="../../static/img/u33.png" mode=""></image>
						</view> -->
					</view>
					<view class="submit">
						<button type="primary" @click="submit">登录</button>
					</view>
					<view class="bottom" @click="saoma">
						<image src="../../static/img/u35.png" mode=""></image>
						<view>可扫描您的工牌直接登录</view>
						<!-- <image class="image" src="../../static/img/u33.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="information">
				镜子信息养老服务云提供计算服务
			</view>
		</view>
		
		<!-- 波浪效果 -->
	<view class="cu-modal" :class="modalName == 'RadioModal' ? 'show' : ''" @tap="hideModal">
		<view class="cu-dialog" @tap.stop="">
			<view class="bg-white" style="padding-top: 12rpx"> 请选择班组 </view>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-list menu text-left">
					<view class="cu-item" v-for="(item, index) in teams" :key="index" @click="changeRadio(item,index)">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub">{{ item.name }}</view>
							<radio style="transform: scale(0.7)" class="round blue" :class="item.checked ? 'checked' : ''" :checked="item.checked ? true : false"
							 :value="'radio' + index"></radio>
						</label>
					</view>
				</view>
			</radio-group>
		</view>
	</view>
	</view>
</template>
<script>
	import {AES,enc,mode,pad} from 'crypto-js'
	import indexBackgroundImage from "@/static/other/beijingtus.png"
	export default {
		data() {
			return {
				indexBackgroundImage:indexBackgroundImage,
				phoneline: false,// 变色线indexBackgroundImage
				passwordline: false,//密碼线
				form: {
					username:'',//用戶名13013769988
					password: "",//密碼123456
					// password: "",
				},
				modalName: null,//彈框
				radio: "radio0",//選中的index
				teams: [],//班組
				item:"",//
				teamId:''//班組id
			};
		},
		onShow() {
			this.modalName = null;
		},
		onLoad() {
			this.$store.state.state = true;
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak(`欢迎登录镜子信息养老机构智慧健康养老云平台`,1);
			}
			// 欢迎登录镜子信息 xxx 平台 
			const that = this;
			uni.$on("NFC_READ", function(msg) {
				that.readCard(msg.rfid);
			});
			if(uni.getStorageSync('username')){
				this.form.username = uni.getStorageSync('username')
			}
		},
		onUnload() {
			// 移除监听事件
			uni.$off("NFC_READ");
		},
		onHide() {},
		methods: {
			// 加密
			encode(password){
				console.log(password)
					let Key = enc.Utf8.parse('mirrortech123456');
					let  passwords = AES.encrypt(password, Key, {
					      mode: mode.ECB,
					      padding: pad.Pkcs7
					  }).ciphertext.toString();
				// let passwords  = AES.encrypt(password, Key).toString();
				return passwords;
			},
			// 解密
			unencode(){
				
			},
			// 公共的声音
			voice(name){
				if(this.$store.state.state&&this.$store.state.isphone){
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(`${name}`,1);
				}
			},
			saoma(){
				this.voice(`您可以将白色工牌靠近手机背面，扫描成功后即可登录`)
			},
			//扫码
			readCard(id) {
				uni.removeStorageSync('userInfo');
				this.$http("/employee-service/loginByRifd/login", "posts", {
					rfidCardId: id,
				}).then((res) => {
					this.loginJump(res)
				});
			},
			RadioChange(e) {
				this.radio = e.detail.value;
			},
			showModal(e) {
				this.modalName = e;
			},
			hideModal(e) {
				this.modalName = null;
			},
			changeRadio(item,index){
					item.checked  = !item.checked 
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('登录'+item.name,1);
					}
					uni.setStorageSync("teamId", this.teams[index].id);
					uni.setStorageSync("teamName", this.teams[index].name);
					// 启动页
					this.teamId = this.teams[index].id;
					this.goWhere()
					this.saveLoginTeam()
			},
			saveLoginTeam(){
				let param = {}
				param.teamId = this.teamId;
				param.employeeId = uni.getStorageSync('employeeId')
				this.$http('/employee-service/app/saveLoginTeam','post',param).then(res=>{
					if(res.data.code==200){
					}
				});
			},
			focus(e) {
				switch (e) {
					case "phone":
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('请输入您的手机号信息', 1);
						}
						this.phoneline = true;
						break;
					case "passwordline":
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('请输入您的密码信息。', 1);
						}
						this.passwordline = true;
						break;
				}
			},
			blur(e) {
				if (e == "phone") {
					this.phoneline = false;
					let phone = this.form.username;
					if(!(/^1[34578]\d{9}$/.test(phone))){ 
						uni.showToast({
							title:'手机号码有误，请重填',
							icon:'none'
						})
						return false; 
					} 
				} else {
					this.passwordline = false;
				}
			},
			// 判断登录到哪个页面
			goWhere(){
				if(uni.getStorageSync('indexs')==0){
					uni.switchTab({
						url: "/pages/basics/index",
					});
				}else if(uni.getStorageSync('indexs')==1){
					uni.switchTab({
						url: "/pages/service/index",
					})
				}else if(uni.getStorageSync('indexs')==2){
					uni.switchTab({
						url: "/pages/my/index",
					})
				}else{
					uni.switchTab({
						url: "/pages/basics/index",
					});
				}
			},
			//页面登录跳转
			loginJump(res){
			
				if (res.data.code == 200) {
					const data = res.data.data;
					if (data.teams == undefined) {
						uni.showToast({
							title: "请绑定班组",
							duration: 2000
						});
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('请绑定班组',1);
						}
					} else if (data.teams.length == 1) {
						this.teams = data.teams;
						uni.setStorageSync("userInfo", data.access_token);
						uni.setStorageSync("nickname", data.nickname);
						uni.setStorageSync("employeeId", data.employeeId);
						uni.setStorageSync("teamId", data.teams[0].id);
						uni.setStorageSync("teamName", data.teams[0].name);
						this.goWhere()
						// 保存
						this.saveLoginTeam();
						
					} else if (data.teams.length > 1) {
						this.teams = data.teams;
						uni.setStorageSync("userInfo", data.access_token);
						uni.setStorageSync("nickname", data.nickname);
						uni.setStorageSync("employeeId", data.employeeId);
						this.showModal("RadioModal");
						let teams = this.teams;
						for (let item of teams) {
							item.checked = false;
						}
						uni.setStorageSync("teamArr", JSON.stringify(teams));
					
					}
				} else {
					console.log(res,'chuchuchcuhcu')
					console.log( res.data.message,' res.data.message res.data.message res.data.message')
					let  message = res.data.message;
					uni.showToast({
						title:message,
						duration: 2000,
						icon:'none'
					});
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(message,1);
					}
				}
			},
			submit() {
				uni.removeStorageSync('userInfo');
				uni.setStorageSync('username',this.form.username)
				if (this.form.username == '' || this.form.password == '') {
					if (this.$store.state.state && this.$store.state.isphone) {
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak("请输入您的手机号和密码进行登录", 1);
					}
					return
				} else {
					if (this.$store.state.state && this.$store.state.isphone) {
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak("登录", 1);
					}
				}
				let password = this.encode(this.form.password);
				let param = {
					username:this.form.username,
					password:password
				}
				console.log(param,99989898)
				// return
				this.$http(
					"/employee-service/careEmployee/login",
					"post",
					param
				).then((res) => {
					this.loginJump(res);
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import  './login.scss';
	
	
	page{
		background-color: #FFFFFF;
	}
	.applogo{
		padding:200rpx 0 50rpx;
		display: flex;
		justify-content: center;	
		align-items: center;
		image{
			width: 400rpx;
			height: 300rpx;
		}
	}
	.form-item{
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.left{
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.right{
			margin-left:-35rpx;
		}
		.center{
			margin-left:12rpx;
			flex: 1;
			border-bottom: 1rpx solid #999;
			padding-right: 50rpx;
		}
		.line{
			border-bottom: 1rpx solid #0081FF;
		}
		
	}
	
	.submit{
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		button{
			margin: 0 40rpx;
		}
	}
	.bottom{
		padding: 20rpx 40rpx;
		display: flex;
		view{
			flex: 1;
			padding-left: 40rpx;
			font-size: 30rpx;
		}
		:nth-child(1){
			width:40rpx;
			height: 40rpx;
		}
	}
	.image{
		width: 40rpx;
		height: 40rpx;
	}
	.place{
		font-size: 30rpx;
	}
</style>
